<template>
	<view class="book-container">
		<view class="book-list">
			<navigator :url="`/pages/book/index?bookId=${book.id}`" v-for="(book, index) in bookData" :key="index"
				class="book-item">
				<!-- 书籍封面 -->
				<image class="book-cover" :src="`${baseURL}${book.image}`" mode="aspectFill" />

				<!-- 书籍信息 -->
				<view class="book-info">
					<!-- 标题和评分 -->
					<view class="book-header">
						<view class="book-title">
							{{ book.name }}
						</view>
						<view class="book-score">
							{{ book.score }}
						</view>
					</view>

					<!-- 描述信息 -->
					<view class="book-description">
						{{ book.description }}
					</view>

					<!-- 标签 -->
					<view class="book-tag">
						{{ book.tagOne }}
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { commonPageQueryData } from '@/services/global'
	import { pageBooksByCategoryAPI } from '@/services/search'
	import { BookItem } from '../types/book'
	import { PageParams } from '../types/global'
	import { CategorySearchParams } from '../types/search'
	import { baseURL } from '@/utils/config'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'

/**
	 * 页面加载完成后加载数据
	 */
	onLoad(() => {
		// 加载推荐列表数据
		pageQueryBookByCategoryData()
	})
	// 是否加载完成
	const finish = ref(false)
	// 是否正在加载
	const isLoading = ref(true)
	// 分页参数
	const pageParams : Required<PageParams> = {
		current: 1,
		size: 8
	}
	// 推荐列表
	const bookData = ref<BookItem[]>([])
	
	/**  分类搜索查询书籍列表
	 * 分页加载数据
	 * @returns  void
	 */
	const pageQueryBookByCategoryData = async () => {
		console.log('分页加载数据', query.queryParams)
		// 分页查询书籍列表
		await commonPageQueryData(
			pageBooksByCategoryAPI,
			bookData,
			finish,
			isLoading,
			pageParams,
			ref(query.queryParams)
		)

		//  处理书籍列表数据
		bookData.value.forEach((book) => {
			book.description =
				book.description!.length > 25
					? book.description!.slice(0, 25) + '...'
					: book.description
			book.name =
				book.name!.length > 15 ? book.name!.slice(0, 14) + '...' : book.name
		})
	}

	/**
	 * 触底加载更多数据
	 */
	const handleScrollToLower = () => {
		pageQueryBookByCategoryData()
	}


	/**
	 * 触底加载更多数据
	 */
	const restartHandleScrollToLower = () => {
		finish.value = false
		pageParams.current = 1
		pageQueryBookByCategoryData()
	}
	/**
	 * 将handleScrollToLower暴露给父组件
	 */
	defineExpose({
		handleScrollToLower,
		restartHandleScrollToLower
	})

	/**
	 * 接收父组件传递的参数，来源字段sourceType
	 */
	const query = defineProps<{
		queryParams : CategorySearchParams
	}>()
</script>

<style lang="scss" scoped>
	/* stylelint-disable */
	.book-container {
		margin: 16rpx;
		height: 100vh;
	}

	.book-list {
		display: flex;
		flex-direction: column;
	}

	.book-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 80rpx;
	}

	.book-cover {
		width: 160rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin-right: 16rpx;
	}

	.book-info {
		flex: 1;
	}

	.book-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.book-title {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 16rpx;
	}

	.book-score {
		width: 80rpx;
		flex-shrink: 0;
		font-weight: bold;
		color: #d97706;
		/* amber-600 */
	}

	.book-description,
	.book-tag {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #9ca3af;
		/* gray-400 */
	}
</style>